<template>
  <div class="modal">
    <Header class="header-cont main__title--top">用户详情</Header>

    <div class="col">
      <label>用户类型</label>
      <Input v-if="person.type == 'NORMAL_USER'"
             value="用户"
             class="input-1"
             disabled />
      <Input v-if="person.type == 'ADMIN_USER'"
             value="管理员"
             class="input-1"
             disabled />
    </div>
    <div class="col">
      <label>用户名</label>
      <Input v-model="person.userName"
             class="input-1"
             disabled />
    </div>
    <div class="col">
      <label>姓名</label>
      <Input v-model="person.name"
             class="input-1"
             disabled />
    </div>
    <div class="col">
      <label>身份证号</label>
      <Input v-model="person.idcard"
             class="input-1"
             disabled />
    </div>
    <div class="col">

      <label>联系电话</label>
      <Input v-model="person.tel"
             class="input-1"
             disabled />

    </div>
    <div class="col">
      <div class="col-item">
        <label>职务</label>
        <Input v-model="person.posts"
               class="input-2"
               disabled />
      </div>
      <div class="col-item">
        <label>角色</label>
        <Input v-model="person.roles"
               class="input-2"
               disabled />
      </div>
    </div>
    <div class="col">
      <div class="col-item">
        <label>机构</label>
        <Input v-model="person.enterpriseName"
               class="input-2"
               disabled />
      </div>
      <div class="col-item">
        <label>项目部</label>
        <Input v-model="person.projectTeamName"
               class="input-2"
               disabled />
      </div>
    </div>
    <div class="col">
      <div class="col-item">
        <label>部门</label>
        <Input v-model="person.deptName"
               class="input-2"
               disabled />
      </div>
      <div class="col-item">
        <label>工区</label>
        <Input v-model="person.workpointName"
               class="input-2"
               disabled />
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      person: {}
    }
  },
  mounted() {
    this.person = this.$route.params.row
  },
  methods: {
    ...mapMutations(['closeTag']),
    // 编辑关闭
    closetab() {
      /**
       * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
       * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
       */
      this.closeTag({
        name: 'user-management-detail',
        params: {
          name: this.$route.params.name,
          id: this.$route.params.id,
          type: this.$route.params.type
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
  .input-1 {
    width: 500px;
  }
  .input-2 {
    width: 245px;
  }
}
.asterisk:before {
  content: '*';
}
.header-modal {
  padding: 30px 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
}
.modal {
  padding: 0 50px;
}
</style>
